<template>
  <div class="tableBody">
    <div class="tableData">
        <div class="cancel">
            <el-button
                type="danger"
                size="small"
                @click="deleData"
                :disabled="multipleSelection.length<1"
            >删除</el-button>
            <a href="javascript:void(0);" target="_blank" style="float:right;margin-left:15px;">导出数据</a>
        </div>        
      <el-table
        :data="tableData"
        stripe
        border
        align="center"
        ref="formTable"
        element-loading-text="拼命加载中..."
        style="width: 100%;min-height: 300px"
        :header-cell-style="{background:'#1989FA',color:'#fff',height:'40px',border:'none'}"
        @selection-change="tableSelectionChange"
        @cell-dblclick="editTdtext"
      >
        <el-table-column type="selection" width="60" align="center" fixed v-if="isEditData"></el-table-column>
        <template v-for="col in table_Title" >
          <el-table-column :key="col.id" :prop="col.prop" :label="col.label" height="30" align="center"></el-table-column>
        </template>
      </el-table>
      <!-- 删除提示框 -->
      <div class="tipDialog">
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
          <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="delVisible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="deleteRow">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <!-- 双击单元格更改单元格内容弹框 -->
      <div class="tdDialog">
        <el-dialog :visible.sync="tdFormVisible" width="300px">
          <el-form :model="dataForm">
            <div class="title">
              <div style="padding: 10px 0">{{dataForm.label}}：{{dataForm.con}}</div>
              <span>更改为</span>
            </div>
            <div class="rightItem">
              <el-date-picker
                v-if="dataForm.type ==='date'"
                size="small"
                v-model="dataForm.newText"
                :key="dataForm.id"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
              <el-input
                v-else-if="dataForm.type !=='date'"
                type="text"
                @input="valueChange(dataForm.newText,dataForm.type)"
                :key="dataForm.id"
                v-model="dataForm.newText"                
                size="small"
              ></el-input> <!--dataForm.props['513'] ? '万' :--> <!-- :placeholder="dataForm.type" -->
            <!-- <el-select v-else-if="item.inputType ==='select'" size="small" v-model="item.value" style="width:140px;margin-right:15px;">
                <el-option v-for="data in item.inputDataList" :key="data.key" :label="data.label" :value="data.label"></el-option>
            </el-select>                 -->
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="confirmEdit">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <div class="manageTableData">
      <el-button v-show="!isEditData" type="primary" @click="isEditData = true">管理</el-button>
      <p class="btn" v-if="isEditData">
        <el-button type="danger" :disabled="multipleSelection.length<1" @click="deleData">删除</el-button>
        <el-button type="primary" @click="isEditData = false">关闭</el-button>
      </p>
    </div>
    <div class="block" style="text-align: center;margin:20px auto">
      <el-pagination
        v-show="paginationSet.page_count && paginationSet.page_count > 1"
        background
        layout="prev, pager, next"
        :page-size="paginationSet.page_size"
        :current-page="currentPage"
        :page-count="paginationSet.page_count"
        :pager-count="paginationSet.pager_count"
        @current-change="currentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { deepCopy } from '@/utils/util';
export default {
    name: 'tableShow',
    props: {
        tableData: Array,
        tableTitle: Array,
        isEdit: Boolean,
        pageSet: Object,
        currentPage: Number
    },
    data() {
        return {
            delVisible: false, //删除提示弹框的状态
            tdFormVisible: false, //点击单元格弹出修改弹框
            msg: '', //记录每一条的信息，便于取id
            delarr: [], //存放删除的数据
            multipleSelection: [], //多选的数据
            table_Title: this.tableTitle,
            paginationSet: {
                page_size: this.pageSet.page_size, // 单页个数
                page_count: this.pageSet.totalPages, // 表格总页数
                pager_count: 5, //页面按钮数
            },
            dataForm: {
                label: '', // 当前编辑的单元格
                con: '',
                newText: '',
                curRow: {}, // 当前编辑行
                id: '', // 当前编辑行commitId
                type: '',
                props:{}
            },
            isEditData: this.isEdit, // 手机端是否为编辑状态
            timeOutEvent: 0,
        };
    },
    watch: {
        pageSet: {
            handler(n, o) {
                if (n.totalPages) {
                    this.paginationSet.page_count = n.totalPages;
                }
            },
            deep: true,
        },
    },
    methods: {
      valueChange(value,type){
            let val = value.replace(/\s/g,'');
            if(type==='number'){
                this.dataForm.newText=isNaN(val)?'':val;
            }else {
                this.dataForm.newText=val.replace(/\s/g,'')
            }
        },
        tableSelectionChange(val) {
            console.log(val);
            this.multipleSelection = val;
        },
        deleteRow() {            
            var commitIds = [],
                commitIdsStr;
            var arr = this.multipleSelection;
            const len = arr.length;
            for (let i = 0; i < len; i++) {
                commitIds.push(arr[i]['commitId']);
            }
            console.info(commitIds);
            // this.$refs.formTable.clearSelection();
            this.delVisible = false;
            commitIdsStr = commitIds.toString();
            this.$emit('delTable', commitIdsStr);
        },
        deleData() {
            this.delVisible = true;
        },
        editTdtext(row, column, cell, event) {
            console.info("编辑滚屏数据");
            if (column && column.type === 'selection') return;
            this.tdFormVisible = true;
            var curItem = this.tableTitle.find(item => {
                return item.prop == column.property;
            });
            var type = curItem.inputType;
            var props = curItem.inputProps;
            this.dataForm = {
                curRow: row,
                label: column.label,
                con: cell.innerText,
                id: column.property,
                type: type,
                props:props,
                newText:""
            };
        },
        confirmEdit() {
            var obj = deepCopy(this.dataForm);
            if (obj.newText == null || obj.newText === '') {
                this.$message.warning('请输入内容');
                return;
            }
            // 组装修改行的数据
            var content = obj.curRow;
            console.info(content);
            content[obj.id] = obj.newText;
            var commitId = content.commitId;

            // 删除commitId属性
            delete content.commitId;
            var para = {
                commitId: commitId,
                content: content,
            };
            this.tdFormVisible = false;
            this.$api.get(
                '/cjScenepage/updateScreenSceneData',
                para,
                res => {
                    this.$message.success('修改成功');
                    this.$emit('fetchData');
                },
                err => {
                    this.$message.error('修改失败');
                }
            );
        },
        currentChange(val) {
            this.$emit('fetchData', val);
        },
        back() {
            window.history.go(-1);
        },
    },
};
</script>

<style lang="scss">
.tableBody {
    box-shadow: 1px 1px 10px 4px #ddd;
    // overflow: hidden;
    background-color: #fff;
    padding: 20px 25px;
    border-radius: 10px;
    .tdDialog {
        .el-dialog {
            border-radius: 10px;
            width: 286px;
            // height: 178px;
            .el-dialog__header {
                padding: 0px;
            }
            .el-dialog__body {
                padding: 22px 20px 0px 20px;
                .el-form {
                    .title {
                        margin-bottom: 15px;
                        p {
                            font-size: 14px;
                            margin: 3px 3px 3px 0px;
                        }
                        span {
                            font-size: 12px;
                            color: #1989fa;
                        }
                    }
                    .el-form-item__content {
                        height: 30px;
                        line-height: 30px;
                        .el-input {
                            .el-input__inner {
                                height: 30px;
                            }
                        }
                    }
                }
            }
            .el-dialog__footer {
                text-align: center;
                padding-top:20px;
                .el-button {
                    width: 58px;
                    height: 30px;
                    line-height: 30px;
                    padding: 0px;
                    text-align: center;
                    font-size: 12px;
                }
            }
        }
    }
    .cancel {
        margin-bottom: 22px;
        float: right;
        line-height: 35px;
    }
    .el-table__header {
        tr,
        th {
            padding: 0;
            height: 40px;
        }
    }
    .el-table__body {
        tr,
        td {
            padding: 0;
            height: 30px;
            border: solid 1px #a3d0fd;
        }
    }
}
.manageTableData {
    display: none;
}
.close {
    float: right;
}
a{
    // text-decoration: underline;
    margin-right: 20px;
    font-size: 14px;
    // color: #409EFF;
} 
@media screen and (max-width: 560px) {
    .tableBody {
        padding: 0;
    }
    .manageTableData {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        z-index: 1000;
        button {
            width: 100%;
            margin: 0px;
        }
        .btn {
            margin: 0;
            button {
                margin: 0;
                float: left;
                width: 50%;
            }
        }
    }
    .cancel {
        display: none;
    }
    .close {
        display: none;
    }
   
}
</style>
